<template>
  <a-form :form="form">
    <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="用户名"
    >
      <a-input
          v-decorator="[
          'username',
          { rules: [{ required: true, message: '请输入用户名' }] },
        ]"
          placeholder="请输入用户名"
      >
        <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="密码"
    >
      <a-input
          v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入密码' }] },
        ]"
          type="password"
          placeholder="请输入密码"
      >
        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>

    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
      <a-button type="primary" @click="login">
        登录
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script>

import * as request from '@/axios/request'
export default {
  name: 'Login',
  components: {
  },
  data() {
    return {
      checkNick: false,
      formItemLayout:{
        labelCol: { span: 4 ,offset: 5},
        wrapperCol: { span: 8 },
      },
      formTailLayout:{
        labelCol: { span: 4 },
        wrapperCol: { span: 8, offset: 9 },
      },
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
    };
  },
  methods: {
    login() {
     let username =  this.form.getFieldValue("username")
     let password = this.form.getFieldValue("password")
      this.form.validateFields(res => {
        console.log(res)
        request.post("login",{
          username:username,
          password:password
        }).then(res=>{
          if(res.code == 100){
            window.localStorage.setItem("token", res.token);
            this.$message.success(res.message);
            this.$router.push({name:'register'})
          }else{
            this.$message.error(res.message);
          }

        })
      });
    },
    handleChange(e) {
      this.checkNick = e.target.checked;
      this.$nextTick(() => {
        this.form.validateFields(['nickname'], { force: true });
      });
    },
  }
}
</script>
